﻿@model List<string>
<script type="text/javascript">
    jQuery.namespace('ProgSchool');
    $(document).ready(function () {
        ProgSchool.currentImg = 1;
        ProgSchool.imageCollection = $("#imageCollection").find("img");
        ProgSchool.totalImg = ProgSchool.imageCollection.length;
        $("#imgNumber").html(ProgSchool.currentImg);
        $("#totalImg").html(ProgSchool.totalImg);
        SetNewImage(ProgSchool.imageCollection[ProgSchool.currentImg - 1].src);

        $("#main_page_head_button_right").click(function () {
            if (ProgSchool.currentImg < ProgSchool.totalImg) {
                $("#imgNumber").html(++ProgSchool.currentImg);
                SetNewImage(ProgSchool.imageCollection[ProgSchool.currentImg - 1].src);
            }
            return false;
        });

        $("#main_page_head_button_left").click(function () {
            if (ProgSchool.currentImg > 1) {
                $("#imgNumber").html(--ProgSchool.currentImg);
                SetNewImage(ProgSchool.imageCollection[ProgSchool.currentImg - 1].src);
            }
            return false;
        });

    });

    function SetNewImage(src) {
        $("#SchollImg").fadeOut();
        $("#SchollImg").attr("src", src);
        $("#SchollImg").fadeIn();
    }
</script>
<div id="main_page_head">
    <div style="float: left; width:360px;height: 366px;">
        <div id="main_page_head_name">
            <span>Find the Perfect Study</span>
        </div>
        <div id="main_page_head_subname">
            <span>abroad the program</span>
        </div>
    </div>
    <div style="float: left; width:580px;height: 366px;">
        <img id="SchollImg" alt="img" style="z-index:1;" />
        <div id="main_page_head_button">
            <a id="main_page_head_button_left" href="javascript:void()"></a>
            <div id="main_page_head_button_page">
                <span id="imgNumber"></span>/<span id="totalImg"></span>
            </div>
            <a id="main_page_head_button_right" href="javascript:void()"></a>
        </div>
    </div>
    <div id="imageCollection" style="display: none;">
        @foreach (var path in Model)
        {
            <img src='@path' />
        }
    </div>
</div>
